<template>
  <el-dialog
    :title="title"
    v-model="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="480px"
    top="50px"
    append-to-body
    @close="emit('pushCloseDialog')"
  >
    <el-timeline style="max-width: 600px">
      <el-timeline-item
        v-for="(activity, index) in processList"
        :key="index"
        :timestamp="activity.time"
        :type="activity.type"
        :color="activity.color"
        size="large"
        :icon="activity.icon"
        hollow
      >
        <el-text :type="activity.type" v-text="activity.content"></el-text>
      </el-timeline-item>
    </el-timeline>
  </el-dialog>
</template>
<script setup lang="ts">
const emit = defineEmits(["pushCloseDialog"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "",
  },
  processList: {
    type: Array<any>,
    default: () => [],
  },
});
watch(
  () => props.visible,
  (val) => {
    dialogVisible.value = val;
  },
  { deep: true }
);
const dialogVisible = ref(false);
</script>
